<template>
  <Container class="moresale-rules">
    <div slot="header" class="container-header title title-center">多买优惠促销</div>
    <ActiveInfo />
    <div class="bg-light mt">
      <div
        v-show="$store.state.moreSale.MoresaleForm.gender!=='1'"
        class="container-header"
      >
        <SearchSale @onSearchData="onSearchData" />
      </div>
      <Tabs v-show="$store.state.moreSale.MoresaleForm.gender=='2' || $store.state.moreSale.MoresaleForm.gender=='3'" v-model="tab" class="mt">
        <template slot="extra">
          <template v-if="tab === 'tab1'">
            <Button class="item" type="primary" icon="md-add" @click="onJoinAdd">批量加入</Button>
          </template>
          <template v-if="tab === 'tab2'">
            <Button class="item" type="primary" icon="md-add" @click="onJoinDelete">批量删除</Button>
          </template>
        </template>
        <TabPane label="选择主商品" name="tab1">
          <choiceCommidy ref="choiceCommidy" :list-data="columns1" :list="data1" />
        </TabPane>
        <TabPane :label="label1" name="tab2">
          <MainCommidy ref="mainCommidy" :list-data="columns2" :list="data2" />
        </TabPane>
      </Tabs>
    </div>
    <div
      v-show="$store.state.moreSale.MoresaleForm.gender=='1'"
      class="set-h2 mt"
    >您已选择了全场参加，店铺所有商品都会参加！</div>
    <div slot="footer" class="container-footer bg-white">
      <Button size="large" @click="jumpPrevPage">返回</Button>
      <Button type="primary" size="large" class="ml" :loading="loading" @click="onAddPost">保存</Button>
    </div>
  </Container>
</template>
<script>
import choiceCommidy from './list/ChoiceCommidyItem'
import MainCommidy from './list/MainCommidyItem'
import SearchSale from '@/views/sales/common/SearchSale'
import ActiveInfo from './edit/ActiveInfoItem'
import { columns1, columns2, data1, data2 } from './list/MoresaleListData'
import { formatDate } from './list/SaleListMethods'
import { getPuduct } from '@/views/sales/common/TableSaleMethods'
export default {
  name: '',
  components: {
    ActiveInfo,
    MainCommidy,
    choiceCommidy,
    SearchSale
  },
  data () {
    return {
      id: this.$route.query.id || '',
      type: this.$route.query.type || '',
      tab: 'tab1',
      loading: false,
      columns1,
      columns2,
      data1,
      data2,
      label1: (h) => {
        return h('div', [
          h('span', '已选主商品'),
          h('Badge', {
            props: {
              count: this.getSaleNum
            }
          })
        ])
      }
    }
  },
  computed: {
    getSaleNum () {
      return this.$store.getters.getMoreSaleNum
    },
    promotionMemberScope () {
      return this.$store.state.moreSale.MoresaleForm.grade
    },
    timeList () {
      return [{
        startDatetime: formatDate(
          this.$store.state.moreSale.MoresaleForm.date[0],
          true
        ),
        endDatetime: formatDate(
          this.$store.state.moreSale.MoresaleForm.date[1],
          true
        )
      }]
    },
    joinTypeEnum () {
      let word
      if (this.$store.state.moreSale.MoresaleForm.gender == '1') {
        word = 'WHOLE'
      } else if (this.$store.state.moreSale.MoresaleForm.gender == '2') {
        word = 'PART'
      } else {
        word = 'PART_NOT'
      }
      return word
    },
    buyMoreTypeEnum () {
      if (this.$store.state.moreSale.MoresaleForm.type == '1') {
        return 'M_MINUS_N'
      } else if (this.$store.state.moreSale.MoresaleForm.type == '2') {
        return 'M_DISCOUNT_N'
      } else if (this.$store.state.moreSale.MoresaleForm.type == '3') {
        return 'M_SELECT_N'
      }
      return ''
    },
    buyMoreRuleList () {
      if (this.$store.state.moreSale.MoresaleForm.type == '1') {
        return [{
          m: this.$store.state.moreSale.MoresaleForm.main,
          n: this.$store.state.moreSale.MoresaleForm.second,
          isParcel: this.$store.state.moreSale.MoresaleForm.isParcel
        }]
      } else if (this.$store.state.moreSale.MoresaleForm.type == '2') {
        let newArray = []
        this.$store.state.moreSale.MoresaleForm.type2.map(function (item, index, array) {
          newArray.push({ m: item.value, isParcel: item.isParcel })
        })
        this.$store.state.moreSale.MoresaleForm.type1.map(function (item, index, array) {
          newArray[index]['n'] = item.value
        })
        return newArray
      } else if (this.$store.state.moreSale.MoresaleForm.type == '3') {
        return [{
          m: this.$store.state.moreSale.MoresaleForm.moreMoney,
          n: this.$store.state.moreSale.MoresaleForm.piece,
          isParcel: this.$store.state.moreSale.MoresaleForm.isParcel
        }]
      }
      return []
    },
    productSkuList () {
      if (this.$store.state.moreSale.MoresaleForm.gender == '1') {
        return []
      } else {
        return getPuduct(this.$store.state.moreSale.GetsaleData, {
          child: 'productSkuList',
          getParam: ['productId', 'id', 'parentcode', 'code']
        })
      }
    }
  },
  mounted () {
    if (this.id && !this.$store.state.moreSale.GetsaleData.length) this.getData()
  },
  methods: {
    getData () {
      this.$ajaxGet(`/activity/activity_sku_list/${this.id}`).then(data => {
        this.$store.state.moreSale.GetsaleData = (data || []).map(item => {
          return {
            id: item.item[0].productId,
            checked: false,
            buttonChecked: false,
            showChildren: false,
            discount: '',
            reduce: '',
            sale: '',
            limitQuantity: '',
            code: item.productSn,
            salePrice: '',
            stock: '',
            isShelf: item.isShelf,
            title: item.title,
            quantity: item.quantity,
            productSkuList: item.item.map(todo => {
              return {
                id: todo.skuId,
                productId: todo.productId,
                productSn: todo.productSn,
                parentcode: item.productSn,
                checked: false,
                buttonChecked: false,
                showChildren: false,
                discount: '',
                reduce: '',
                limitQuantity: '',
                code: todo.skuSn,
                salePrice: todo.productSkuInfo.salePrice,
                sale: todo.promotionPrice,
                isShelf: todo.isShelf,
                title: '',
                stock: todo.productSkuInfo.stock,
                returnPrice: '',
                quantity: item.quantity
              }
            })
          }
        })
        this.onSearchData()
      })
    },
    onSearchData (param) {
      this.$refs.choiceCommidy.getProductData(param)
    },
    onJoinCancel () {
      this.tab = 'tab1'
    },
    onJoinAlready () {
      this.tab = 'tab2'
    },
    jumpPrevPage () {
      this.$router.back()
    },
    onJoinAdd () {
      this.$refs.choiceCommidy.getSaleData('checked')
    },
    onJoinDelete () {
      this.$refs.mainCommidy.deleteSaleData()
    },
    onAddPost () {
      let self = this
      self.loading = true
      let url = '/activity/buy_more/save'
      if (this.id && this.type) url = '/activity/buy_more/modify'
      let param = {
        activityInfoDTO: {
          activityDescription: this.$store.state.moreSale.MoresaleForm.remarks, //活动备注
          activityName: this.$store.state.moreSale.MoresaleForm.name, //活动名称
          startDate: this.timeList[0].startDatetime,
          productSkuList: this.productSkuList, // 已选商品
          endDate: this.timeList[0].endDatetime,
          storeTypeEnumList: this.promotionMemberScope, //活动对象
          shelfStatusEnum: 'ON',
          joinTypeEnum: this.joinTypeEnum //参与方式
        },
        activityBuyMoreDTO: {
          buyMoreRuleList: this.buyMoreRuleList, //规则
          buyMoreTypeEnum: this.buyMoreTypeEnum //促销类型
        }
      }
      if (this.id && this.type) param.activityBuyMoreDTO.activityId = this.id
      this.$jsonPost(url, param).then(data => {
        self.$Message.success((this.id && this.type) ? '编辑成功' : '新增活动成功')
        self.$store.commit('setMoreSaleEmpty')
        self.loading = false
        self.$router.push({ name: 'sales/list' })
      }).catch((data) => {
        self.loading = false
      })
    }
  }
}
</script>

